<template>
  <div class="profile-page">
    <!-- 个人信息头部 -->
    <div class="profile-header">
      <div class="user-info">
        <div class="avatar">
          <img v-if="userInfo.imagePath" :src="userInfo.imagePath" :alt="userInfo.userName">
        </div>
        <div>
          <h5 class="mb-1">{{ userInfo.userName }}</h5>
<!--          <div class="small">{{ userInfo.userLevel }}考研 | {{ userInfo.targetMajor }} | {{userInfo.groupName}}</div>-->
        </div>
      </div>
<!--      <div class="study-stats">-->
<!--        <div v-for="stat in stats" :key="stat.label" class="stat-item">-->
<!--          <div class="stat-value">{{ stat.value }}</div>-->
<!--          <div class="stat-label">{{ stat.label }}</div>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <!-- 个人信息 -->
    <div class="menu-section">
<!--      <div class="section-title">个人信息</div>-->
<!--      <router-link to="/profile-edit-t" class="menu-item">-->
<!--        <div class="menu-icon blue">-->
<!--          <i class="bi bi-person"></i>-->
<!--        </div>-->
<!--        <div class="menu-content">-->
<!--          <div class="menu-label">基本信息</div>-->
<!--          <div class="menu-desc">修改个人资料和目标院校</div>-->
<!--        </div>-->
<!--        <i class="bi bi-chevron-right text-muted"></i>-->
<!--      </router-link>-->
      <div  class="menu-item">
        <div class="menu-icon red">
          <i class="bi bi-forward"></i>
        </div>
        <div class="menu-content" @click="logout">
          <div class="menu-label">退出登录</div>
          <div class="menu-desc">退出系统，重新登录</div>
        </div>
        <i class="bi bi-chevron-right text-muted"></i>
      </div>
    </div>
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="d-flex justify-content-around">
        <div class="text-center">
          <router-link to="/groups" class="text-decoration-none text-dark">
            <i class="bi bi-nut"></i>
            <div>群组</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/students" class="text-decoration-none text-dark">
            <i class="bi bi-person-dash"></i>
            <div>学生</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/qaT" class="text-decoration-none text-dark">
            <i class="bi bi-chat-dots"></i>
            <div>答疑</div>
          </router-link>
        </div>
        <div class="text-center">
          <router-link to="/profileT" class="text-decoration-none text-dark">
            <i class="bi bi-person-fill"></i>
            <div>我的</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserByToken} from "@/config/api";
import http from "@/router/http";
import router from '@/router'

export default {
  name: 'ProfileView',
  data() {
    return {
      userInfo: {
        imagePath: '',
        userName: '',
        userLevel: '',
        targetMajor: '',
        targetUniversity: ''

      },
      stats: [
        { value: '', label: '打卡天数' },
        { value: '', label: '积分' },
        { value: '68%', label: '学习进度' },
        { value: '', label: '连续学习' }
      ],
      menuItems: [
        {
          path: '/study-statistics',
          icon: 'bi bi-graph-up',
          iconColor: 'purple',
          label: '学习统计',
          desc: '查看学习进度和成绩分析'
        },
        {
          path: '/study-report',
          icon: 'bi bi-file-text',
          iconColor: 'orange',
          label: '学习报告',
          desc: '每周学习情况分析'
        },

      ]
    }
  },
  mounted() {
    this.fetchProfileData(); // 在组件挂载时调用获取用户资料数据的方法
    this.findDaKa();//打卡天数（登陆天数）
    this.findIntegral();//用户积分
    this.findStudy();//学习进度
    this.findStudyProgress();//连续学习天数
  },
  methods: {
    // 打卡天数
    async findDaKa() {
      try {
        const response = await http.get('/student/getUserEventLog/counts');
        if (response.status === 200) {
          this.dakaCount = response.data; // 假设 dakaCount 是存储打卡天数的变量
          // 更新 stats 数组中的打卡天数
          this.stats[0].value = this.dakaCount.response;
        }
      } catch (error) {
        console.error('获取打卡天数失败:', error);
      }
    },
    //用户积分
    async findIntegral() {
      try {
        const response = await http.get('/student/getUserEventLog/integral');
        if (response.status === 200) {
          this.integral = response.data; // 假设 integral 是存储积分的变量
          // 更新 stats 数组中的积分
          this.stats[1].value = this.integral.response;
        }
      } catch (error) {
        console.error('获取积分失败:', error);
      }
    },
    //学习进度
    async findStudy() {
      try {
        const response = await http.get('student/getUserEventLog/progress');
        if (response.status === 200) {
          this.studyProgress = response.data; // 假设 studyProgress 是存储学习进度的变量
          // 更新 stats 数组中的学习进度
          this.stats[2].value = this.studyProgress.response+'%';
        }
      } catch (error) {
        console.error('获取学习进度失败:', error);
      }
    },
    //连续学习天数
    async findStudyProgress() {
      try {
        const response = await http.get('/student/getUserEventLog/keepLearning');
        if (response.status === 200) {
          this.studyProgress = response.data; // 假设 studyProgress 是存储学习进度的变量
          // 更新 stats 数组中的学习进度
          this.stats[3].value = this.studyProgress.response+'天';
        }
      } catch (error) {
        console.error('获取学习进度失败:', error);
      }
    },

    async fetchProfileData() {
      try {

        //获取当前用户信息
        const userData = await getUserByToken();
        const user = userData.response;
        const response = await http.get(`/userToken/getUserById/${user.userId}`);
        if (response.status === 200 && response.data && response.data.response) {
          this.userInfo = response.data.response; // 将后端返回的数据赋值给form对象，填充表单数据
          const baseUrl = http.defaults.baseURL || "";
          if(response.data.response.imagePath){
            this.userInfo.imagePath =  baseUrl+"/uploadPath"+ response.data.response.imagePath;
          }
        }
      } catch (error) {
        console.error('获取用户资料数据失败:', error);
      }
    },
    async logout() {
      try {
        const response = await http.post('/user/logout', {});
        if (response.status === 200 && response.data) {
          localStorage.removeItem('token');
          await router.push({path: '/'})
        }
      } catch (error) {
        console.error('退出失败:', error);
      }
    }
  }
}
</script>

<style scoped>
.profile-page {
  background-color: #f5f5f5;
  padding-bottom: 60px;
  min-height: 100vh;
}

.profile-header {
  background: linear-gradient(135deg, #00b8a9, #00a19a);
  color: white;
  padding: 25px 20px;
  border-radius: 0 0 30px 30px;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.study-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 15px;
  background: rgba(255,255,255,0.1);
  border-radius: 15px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
  position: relative;
  display: inline-block;
}

.stat-value[data-progress]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: var(--progress);
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
}

.stat-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

.menu-section {
  background: white;
  border-radius: 15px;
  margin: 15px;
  overflow: hidden;
}

.section-title {
  padding: 15px;
  color: #666;
  font-size: 0.9rem;
  border-bottom: 1px solid #eee;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 1.2rem;
}

.menu-icon.blue { background: #e6f3ff; color: #4d96ff; }
.menu-icon.green { background: #e6fff3; color: #00b8a9; }
.menu-icon.orange { background: #fff3e6; color: #ffa41b; }
.menu-icon.purple { background: #f3e6ff; color: #b19cd9; }
.menu-icon.red { background: #ffe6e6; color: #ff6b6b; }

.menu-content {
  flex: 1;
}

.menu-label {
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.menu-desc {
  font-size: 0.8rem;
  color: #999;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  padding: 10px 0;
  border-top: 1px solid #eee;
  z-index: 1000;
}

.nav-item {
  text-align: center;
  text-decoration: none;
  color: #666;
  font-size: 0.8rem;
}

.nav-item.active {
  color: #00b8a9;
}

.nav-item i {
  font-size: 1.2rem;
  margin-bottom: 3px;
}
</style> 